import type {IColumnsOption} from 'vc';
import {
  INDEX,
} from '@/utils/tableColumn';
import {setHrefUrlTool} from '@/utils';

export function useTable(data) {
  const columns = ref<IColumnsOption[]>([
    {...INDEX},
    {
      field: 'monitorDate',
      title: '监测时间',
      align: 'center',
      sortable: true,
      width: 160,
      sortBy: 'monitorDate',
    },
    {
      field: 'monitorItem',
      title: '监测项目',
      align: 'center',
      // sortable: true,
      width: 150,
      sortBy: 'monitorItem',
      slots: {
        default: ({row}) => {
          return <>
            <div class="date">
              <span class="text">{row.monitorItem}</span>
            </div>
          </>;
        }
      }
    },
    {
      field: 'monitorStation',
      title: '监测点名称',
      align: 'center',
      width: 110,
      // sortable: true,
      sortBy: 'monitorStation'
    },
    {
      field: 'noticeDate',
      title: '超标倍数',
      align: 'center',
      // sortable: true,
      width: 110,
      sortBy: 'noticeDate',
      slots: {
        default: ({row}) => {
          return <>
            {row.tagOverproof && row.overproofMultiples ? <span style={{color: '#ff7a80'}}>
                {row.overproofMultiples}
              </span> : <span>{row.overproofMultiples || '-'}</span>}
          </>;
        }
      }
    },
    {
      field: 'concentration',
      title: '浓度实测值',
      align: 'center',
      // sortable: true,
      width: 110,
      sortBy: 'concentration',
      slots: {
        default: ({row}) => {
          const content = row.concentration;
          if (content) {
            return <span>
              {row.tagOverproof ? <span style={{color: '#ff7a80'}} v-html={content}></span> :
                <span v-html={content}></span>}
            </span>
          } else {
            return '-';
          }
        }
      }
    },
    {
      field: 'reducedConcentration',
      title: '浓度折算值',
      align: 'center',
      // sortable: true,
      width: 110,
      sortBy: 'reducedConcentration',
      slots: {
        default: ({row}) => {
          return <>
            {row.tagOverproof ? <span style={{color: '#ff7a80'}}>
                {row.reducedConcentration || '-'}
              </span> : <span>{row.reducedConcentration || '-'}</span>}
          </>;
        }
      }
    },
    {
      field: 'concentrationUpperLimit',
      title: '标准限值',
      align: 'center',
      // sortable: true,
      width: 110,
      sortBy: 'concentrationUpperLimit',
      formatter: ({row}) => {
        if (row.concentrationUpperLimit &&
          row.concentrationLowerLimit) {
          return row.concentrationUpperLimit + '-' + row.concentrationLowerLimit
        } else {
          return row.concentrationUpperLimit || row.concentrationLowerLimit
        }
      }
    },
    {
      field: 'unit',
      title: '单位',
      align: 'center',
      // sortable: true,
      width: 110,
      sortBy: 'unit'
    },
    {
      field: 'reason',
      title: '超标原因',
      align: 'center',
      width: 110,
      showOverflow: 'title'
    },
    {
      field: 'source',
      title: '来源',
      align: 'center',
      // sortable: true,
      width: 110,
      sortBy: 'source',
      showOverflow: 'title'
    },

  ]);

  const columnsPermit = ref<IColumnsOption[]>([
    {...INDEX},
    {
      field: 'licenceNo',
      title: '许可证编号',
      align: 'center',
      sortable: true,
      width: 200,
      sortBy: 'licenceNo',
    },
    {
      field: 'monitorDate',
      title: '超标起始时间',
      align: 'center',
      sortable: true,
      width: 160,
      sortBy: 'monitorDate',
    },
    {
      field: 'expireTime',
      title: '超标截止时间',
      align: 'center',
      sortable: true,
      width: 160,
      sortBy: 'expireTime',
    },
    {
      field: 'monitorStation',
      title: '排放口编号',
      align: 'center',
      // sortable: true,
      width: 110,
      sortBy: 'monitorStation',
    },
    {
      field: 'monitorItem',
      title: '污染物',
      align: 'center',
      // sortable: true,
      width: 140,
      sortBy: 'monitorItem',
    },
    {
      field: 'reducedConcentration',
      title: '排放浓度',
      align: 'center',
      // sortable: true,
      width: 180,
      sortBy: 'reducedConcentration',
      slots: {
        default: ({row}) => {
          return <>
            <div class="date">
              <span class="text">{row.reducedConcentration} {row.unit}</span>
            </div>
          </>;
        }
      }
    },
    {
      field: 'reason',
      title: '超标原因',
      showOverflow: 'title'
    }
  ]);

  return {
    columns,
    columnsPermit
  };
}
